<template>
    <view class="basic-nav" :style="{ paddingTop: safeAreaInsetTop ? statusBarHeight + 'px' : '0' }">
        <view class="nav-content" :style="{ height: navBarHeight + 'px', backgroundColor: bgColor }">
            <!-- 左侧区域 -->
            <view class="nav-left" @click="onLeftClick">
                <slot name="left">
                    <view v-if="showBack">
                        <up-icon name="arrow-left" :color="leftIconColor" size="20"></up-icon>
                    </view>
                </slot>
            </view>

            <!-- 中间区域 -->
            <view class="nav-center">
                <slot name="center">
                    <text class="nav-title" :style="titleStyle">{{ title }}</text>
                </slot>
            </view>

            <!-- 右侧区域 -->
            <view class="nav-right" @click="onRightClick">
                <slot name="right"></slot>
            </view>
        </view>
    </view>
    <!-- 占位元素，用于处理顶部安全区 -->
    <view v-if="fixed && placeholder" class="nav-placeholder"
        :style="{ height: safeAreaInsetTop ? statusBarHeight + navBarHeight + 'px' : navBarHeight + 'px' }"></view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getSystemInfo } from '@/utils';

/**
 * 导航栏属性
 */
const props = defineProps({
    /** 标题 */
    title: {
        type: String,
        default: ''
    },
    /** 是否显示返回按钮 */
    showBack: {
        type: Boolean,
        default: false
    },
    /** 是否开启顶部安全区适配 */
    safeAreaInsetTop: {
        type: Boolean,
        default: true
    },
    /** 标题样式 */
    titleStyle: {
        type: Object,
        default: () => ({
            color: '#181818',
            fontSize: '34rpx',
            fontWeight: '500'
        })
    },
    /** 左侧图标颜色 */
    leftIconColor: {
        type: String,
        default: '#333333'
    },
    /** 背景颜色 */
    bgColor: {
        type: String,
        default: '#ffffff'
    },
    /** 是否固定在顶部 */
    fixed: {
        type: Boolean,
        default: true
    },
    /** 是否显示底部边框 */
    border: {
        type: Boolean,
        default: true
    },
    /** 是否显示占位元素 */
    placeholder: {
        type: Boolean,
        default: true
    },
    /** 层级 */
    zIndex: {
        type: [String, Number],
        default: 100
    }
});

const emit = defineEmits(['leftClick', 'rightClick']);

/** 状态栏高度 */
const statusBarHeight = ref(0);
/** 导航栏高度 */
const navBarHeight = ref(44);

/**
 * 获取系统信息
 */
// const getSystemInfo = () => {
//     const windowInfo = uni.getWindowInfo();
//     statusBarHeight.value = windowInfo.statusBarHeight;// 获取状态栏高度

//     // #ifdef MP-WEIXIN
//     const appBaseInfo = uni.getAppBaseInfo();
//     const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
//     navBarHeight.value = (menuButtonInfo.top - windowInfo.statusBarHeight) * 2 + menuButtonInfo.height;
//     // #endif

//     // #ifndef MP-WEIXIN
//     navBarHeight.value = windowInfo.statusBarHeight + 44;
//     // #endif
// };

/**
 * 处理左侧点击事件
 */
const onLeftClick = () => {
    if (props.showBack) {
        uni.navigateBack();
    }
    emit('leftClick');
};

/**
 * 处理右侧点击事件
 */
const onRightClick = () => {
    emit('rightClick');
};

onMounted(() => {
    const { statusBarHeight: statusBarHeightValue, navBarHeight: navBarHeightValue } = getSystemInfo();
    statusBarHeight.value = statusBarHeightValue;
    navBarHeight.value = navBarHeightValue;
});
</script>

<style lang="scss" scoped>
.basic-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: v-bind('zIndex');
    background-color: v-bind('bgColor');

    .nav-content {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 10px;
        border-bottom: v-bind('border ? "1px solid #eee" : "none"');

        .nav-left {
            position: absolute;
            left: 10px;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .nav-center {
            flex: 1;
            text-align: center;
        }

        .nav-right {
            position: absolute;
            right: 10px;
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
}

.nav-placeholder {
    width: 100%;
}
</style>